<template>
  <a-form-model
    v-if="data"
    ref="ruleForm"
    :model="checkForm"
    :rules="checkRules"
    :label-col="{ span: 3 }"
    :wrapper-col="{ span: 11 }"
  >
    <a-alert
      v-if="data.is_submit === 3 && data.fail_reason"
      :message="data.fail_reason"
      banner
      style="margin-bottom:20px;"
    />

    <div class="title">小程序信息</div>
    <a-form-model-item label="小程序LOGO" prop="app_logo">
      <cyyUploadImg
        :disabled="true"
        @uploadSuccess="e => (checkForm.app_logo = e.data)"
        @deleteImg="checkForm.app_logo = ''"
        :imgSrc="checkForm.app_logo"
      >
      </cyyUploadImg>
    </a-form-model-item>
    <a-form-model-item label="小程序名称" prop="app_name">
      <a-input disabled placeholder="请输入小程序名称" v-model="checkForm.app_name" />
    </a-form-model-item>
    <a-form-model-item label="小程序英文名称" prop="app_english_name">
      <a-input disabled placeholder="请输入小程序英文名称" v-model="checkForm.app_english_name" />
    </a-form-model-item>
    <a-form-model-item label="小程序版本号">
      <a-input v-model="checkForm.version" disabled />
    </a-form-model-item>
    <a-form-model-item label="小程序类目" prop="mini_category_ids">
      <a-tree-select
        style="width: 100%"
        v-model="checkForm.mini_category_ids"
        placeholder="请选择类目"
        allow-clear
        multiple
        @change="changeNode"
        disabled
      >
        <a-tree-select-node
          :value="item1.category_id"
          :title="item1.category_name"
          v-for="item1 in categories"
          :key="item1.category_id"
          :selectable="!item1.has_child"
        >
          <template v-if="item1.has_child">
            <a-tree-select-node
              :value="item1.category_id + '_' + item2.category_id"
              :title="item2.category_name"
              v-for="item2 in item1.children"
              :key="item2.category_id"
              :selectable="!item2.has_child"
            >
              <template v-if="item2.has_child">
                <a-tree-select-node
                  :value="item1.category_id + '_' + item2.category_id + '_' + item3.category_id"
                  :title="item3.category_name"
                  v-for="item3 in item2.children"
                  :key="item3.category_id"
                  :selectable="!item3.has_child"
                />
              </template>
            </a-tree-select-node>
          </template>
        </a-tree-select-node>
      </a-tree-select>
      <div class="ts">用户提交申请后需要到支付宝信息中心确认申请信息。</div>
    </a-form-model-item>
    <a-form-model-item label="客服电话" prop="service_phone">
      <a-input disabled placeholder="请输入客服电话" v-model="checkForm.service_phone" />
    </a-form-model-item>
    <a-form-model-item label="客服邮箱" prop="service_email">
      <a-input disabled placeholder="请输入客服邮箱" v-model="checkForm.service_email" />
    </a-form-model-item>
    <a-form-model-item label="小程序功能描述" prop="app_slogan">
      <a-input disabled placeholder="请输入小程序功能描述" v-model="checkForm.app_slogan" />
    </a-form-model-item>
    <a-form-model-item label="小程序应用描述" prop="app_desc">
      <a-textarea disabled placeholder="请输入小程序应用描述" :rows="3" v-model="checkForm.app_desc" />
    </a-form-model-item>
    <div class="hr"></div>
    <div class="title">企业信息</div>
    <a-form-model-item label="企业名称" prop="license_name">
      <a-input disabled placeholder="请输入企业名称" v-model="checkForm.license_name" />
    </a-form-model-item>
    <a-form-model-item label="企业代码" prop="license_no">
      <a-input disabled placeholder="请输入企业代码" v-model="checkForm.license_no" />
    </a-form-model-item>
    <a-form-model-item label="营业执照" prop="license_pic">
      <cyyUploadImg
        @uploadSuccess="e => (checkForm.license_pic = e.data)"
        @deleteImg="checkForm.license_pic = ''"
        :imgSrc="checkForm.license_pic"
        :disabled="true"
      >
      </cyyUploadImg>
    </a-form-model-item>
    <a-form-model-item label="是否长期" prop="service_phone">
      <a-radio-group disabled v-model="checkForm.is_long_effective">
        <a-radio value="0"> 短期 </a-radio>
        <a-radio value="1"> 长期 </a-radio>
      </a-radio-group>
    </a-form-model-item>
    <a-form-model-item label="过期时间" prop="license_date" v-if="checkForm.is_long_effective == 0">
      <a-date-picker disabled v-model="checkForm.license_date" valueFormat="YYYY-MM-DD" />
    </a-form-model-item>
    <div class="hr"></div>
    <div class="title">其他信息</div>
    <a-form-model-item label="小程序版本描述" prop="version_desc">
      <a-textarea disabled placeholder="请输入小程序版本描述" :rows="3" v-model="checkForm.version_desc" />
    </a-form-model-item>
    <a-form-model-item
      label="特殊资质证书"
      prop="other_data"
      v-if="checkForm.other_data && checkForm.other_data.length"
    >
      <cyyUploadImg
        :disabled="true"
        @uploadSuccess="selectPic"
        @deleteImg="delPic"
        :imgList.sync="checkForm.other_data"
        dataType="list"
      >
      </cyyUploadImg>
    </a-form-model-item>

    <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
      <!-- <a-button class="btn" type="primary" @click="update(checkForm.id)">更新模板</a-button>
      <a-button class="btn" type="primary" @click="cancelAudit(checkForm.id)" v-if="checkForm.is_submit == 1"
        >撤销审核</a-button
      >
      <a-button
        v-if="data.is_submit === 0 || data.is_submit === 3"
        :loading="isLoading"
        class="btn"
        type="primary"
        @click="checkApplet"
        >提交审核</a-button
      >
      <a-button class="btn" @click="issueAlipay(checkForm.id)" type="link" v-if="data.is_submit == 2">发布</a-button> -->
      <a-button class="btn" @click="$router.go(-1)"> 返回 </a-button>
    </a-form-model-item>
  </a-form-model>
</template>

<script>
import { alipaySubmit, alipayCancleApply, updateAlipay, alipayCategories, issueAlipay } from '@/api/setting/applet'
import { cyyUploadImg } from '@/components/CyyUi/index'
export default {
  components: {
    cyyUploadImg
  },

  watch: {
    data: {
      handler(newVal) {
        if (newVal) {
          this.getData(newVal)
        }
      },
      immediate: true,
      deep: true
    }
  },

  props: {
    data: {
      type: Object,
      default() {
        return null
      }
    }
  },

  data() {
    let checkPic = (rule, value, callback) => {
      if (this.alipayForm.license_pic == '') {
        callback(new Error('请上传公司营业执照'))
      } else {
        callback()
      }
    }

    return {
      isLoading: false,
      // 小程序类目
      categories: [],

      disabled: true,

      // 提交审核的小程序表单
      checkForm: {
        id: '',
        version: '',
        version_desc: '',
        app_logo: '',
        app_name: '',
        app_english_name: '',
        mini_category_ids: [],
        service_phone: '',
        service_email: '',
        app_slogan: '',
        app_desc: '',
        license_name: '',
        license_no: '',
        license_pic: '',
        license_date: '',
        is_long_effective: '0',
        other_data: []
      },

      // 提交审核验证规则
      checkRules: {
        logo: [{ required: true, message: '请上传小程序logo' }],
        version_desc: [{ min: 30, max: 500, required: true, message: '长度30-500字符' }],
        app_name: [{ required: true, message: '请输入小程序名称', trigger: 'blur' }],
        app_english_name: [{ required: true, message: '请输入小程序英文名称', trigger: 'blur' }],
        mini_category_ids: [{ type: 'array', required: true, message: '请选择小程序类目', trigger: 'change' }],
        service_phone: [{ required: true, message: '请输入客服电话', trigger: 'blur' }],
        service_email: [{ required: true, message: '请输入客服邮箱', trigger: 'blur' }],
        app_slogan: [{ required: true, message: '请输入小程序功能描述', trigger: 'blur' }],
        app_desc: [{ required: true, min: 20, max: 200, message: '长度20-200字符', trigger: 'blur' }],
        license_name: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
        license_no: [{ required: true, message: '请输入企业代码', trigger: 'blur' }],
        license_pic: [{ required: true, message: '请上传营业执照' }],
        license_date: [{ required: true, message: '请选择营业执照过期时间', trigger: 'change' }]
      }
    }
  },

  methods: {
    // 点击发布小程序
    issueAlipay(id) {
      this.$confirm({
        title: '确认发布小程序?',
        onOk: () => {
          issueAlipay({ id }).then(res => {
            if (res.code == 0) {
              this.$emit('changeData')
            }
          })
        },
        onCancel() {}
      })
    },

    changeNode(e) {
      if (e.length > 4) {
        this.$message.warning('最多可选4个类目')
        this.checkForm.mini_category_ids = this.checkForm.mini_category_ids.slice(0, 4)
        return
      }
    },

    // 获取小程序类目
    async alipayCategories(id) {
      const res = await alipayCategories({
        is_filter: 1,
        id
      })

      if (res.code == 0) {
        this.categories = res.data
      }
    },

    getData(data) {
      let {
        id,
        version,
        version_desc,
        app_logo,
        app_name,
        app_english_name,
        mini_category_ids,
        service_phone,
        service_email,
        app_slogan,
        app_desc,
        license_name,
        license_no,
        license_pic,
        license_date,
        is_long_effective,
        other_data
      } = data

      this.alipayCategories(id)
      this.checkForm = {
        id,
        version,
        version_desc,
        app_logo,
        app_name,
        app_english_name,
        mini_category_ids,
        service_phone,
        service_email,
        app_slogan,
        app_desc,
        license_name,
        license_no,
        license_pic,
        license_date,
        is_long_effective,
        other_data
      }
    },

    delPic(e) {
      this.checkForm.other_data.splice(e.index, 1)
    },

    changeNode(e) {
      if (e.length > 4) {
        this.$message.warning('最多可选4个类目')
        this.checkForm.mini_category_ids = this.checkForm.mini_category_ids.slice(0, 4)
        return
      }
    },

    selectPic(e) {
      let arr = this.checkForm.other_data ? this.checkForm.other_data : []
      let length = arr.length
      if (length >= 3) {
        this.$message.error('最多上传三张特殊资质图片')
      }
      if (length < 3) {
        e.data.splice(3 - length) //
      }

      e.data.forEach(ele => {
        arr.push(ele)
      })
      this.$set(this.checkForm, 'other_data', arr)
    },

    // 点击更新模板
    update(id) {
      this.$confirm({
        title: '确认更新模板？',
        onOk: () => {
          updateAlipay({ id }).then(res => {
            if (res.code == 0) {
              this.$emit('changeData')
            }
          })
        },
        onCancel() {}
      })
    },

    // // 点击撤销审核
    // cancelAudit(id) {
    //   this.$confirm({
    //     title: '确认撤销审核？',
    //     onOk() {
    //       alipayCancleApply({ id }).then(res => {
    //         if (res.code == 0) {
    //           this.$emit('changeData')

    //           this.$message.success(res.msg)
    //           return
    //         }

    //         this.$message.error(res.msg)
    //       })
    //     },
    //     onCancel() {}
    //   })
    // },

    // 提交审核小程序
    async checkApplet() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          this.isLoading = true
          const res = await alipaySubmit({ auditData: this.checkForm })
          this.isLoading = false
          if (res.code == 0) {
            this.$emit('changeData')
            this.$message.success(res.msg)
            return
          }

          this.$message.error(res.msg)
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 14px;
}

.btn {
  margin: 0 5px;
}

.tip {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
  line-height: normal;
}

.hr {
  margin-bottom: 24px;
  height: 1px;
  background: #e8e8e8;
}
</style>
